<template>
  <!-- 组件根标签 -->
  <div class="my">
    <!-- <h3>my</h3> -->
    <!-- 1.上半部分 -->
    <div class="user">
      <!-- 1.用户信息 -->
      <div class="userinfo">
        <div class="left">
          <div class="username">{{ user.nickname }}</div>
          <div class="shuoming">{{ user.intro }}</div>
        </div>
        <div class="rigtht" @click="toinfo">
          <img :src="baseURL + user.avatar" alt="" />
        </div>
      </div>

      <!-- 2.用户数据 -->
      <div class="userdata">
        <div class="item">
          <div class="num">{{ user.submitNum }}</div>
          <div class="wenzi">累计答题</div>
        </div>
        <div class="item">
          <div class="num">{{ user.collectQuestions.length }}</div>
          <div class="wenzi">收藏题目</div>
        </div>
        <div class="item">
          <div class="num">{{ user.errorNum }}</div>
          <div class="wenzi">我的错题</div>
        </div>
        <div class="item">
          <div class="num">%</div>
          <div class="wenzi">正确率</div>
        </div>
      </div>
      <!-- 3.用户岗位 -->
      <div class="userpostion">
        <van-cell
          @click="toEdit('position')"
          title="我的岗位"
          :value="user.position"
          is-link
        >
          <template #icon>
            <i class="iconfont  iconicon_mine_gangwei mymyicon"></i>
          </template>
        </van-cell>
      </div>
    </div>

    <!-- 2.下半部分 -->
    <div class="other">
      <div class="face">
        <h3>面经数据</h3>
        <div class="items">
          <div class="item">
            <p>
              昨日阅读 <span>+{{ user.shareData.read.yesterday }}</span>
            </p>
            <div class="num">{{ user.shareData.read.total }}</div>
            <div>阅读总数</div>
          </div>
          <div class="item">
            <p>
              昨日获赞 <span>+{{ user.shareData.star.yesterday }}</span>
            </p>
            <div class="num">{{ user.shareData.star.total }}</div>
            <div>获赞总数</div>
          </div>
          <div class="item">
            <p>
              昨日新增
              <span
                >+{{
                  user.shareData.read.yesterday + user.shareData.star.yesterday
                }}</span
              >
            </p>
            <div class="num">{{ user.shareData.comment.total }}</div>
            <div>评论总数</div>
          </div>
        </div>
      </div>

      <!-- 经验列表 -->
      <div class="list">
        <van-cell title="我的面经分享" value="21" is-link>
          <template #icon>
            <i class="iconfont  iconicon_mine_mianjing mymyicon"></i>
          </template>
        </van-cell>
        <van-cell title="我的消息" value="98" is-link>
          <template #icon>
            <i class="iconfont  iconicon_mine_xiaoxi mymyicon"></i>
          </template>
        </van-cell>
        <van-cell title="收藏的题库" value="32" is-link>
          <template #icon>
            <i class="iconfont  iconicon_mine_tikushoucang mymyicon"></i>
          </template>
        </van-cell>
        <van-cell title="收藏的企业" value="32" is-link>
          <template #icon>
            <i class="iconfont  iconicon_mine_qiyeshoucang mymyicon"></i>
          </template>
        </van-cell>
        <van-cell title="我的错题" value="123" is-link>
          <template #icon>
            <i class="iconfont  iconicon_mine_cuoti mymyicon"></i>
          </template>
        </van-cell>
        <van-cell title="收藏的面试经验" value="166" is-link>
          <template #icon>
            <i class="iconfont  iconbtn_shoucang_sel mymyicon"></i>
          </template>
        </van-cell>
      </div>
    </div>
    <!-- 使用硬射过来的数据 -->
    <!-- {{ user }} -->
  </div>
</template>
<script>
// 使用mapState方法,将$store对象中的state中的数据硬射到这个vue文件中
import { mapState } from 'vuex'

export default {
  data () {
    return {
      // 基地址
      baseURL: process.env.VUE_APP_BaseURL
    }
  },
  methods: {
    toinfo () {
      this.$router.push('/info')
    },
    // 跳转到统一修改资料的页面
    toEdit (prop) {
      this.$router.push(`/editinfo?protoype=${prop}`)
    }
  },
  components: {},

  // 硬射$store的state数据
  computed: {
    ...mapState(['user'])
  }
}
</script>
<style lang="less">
.my {
  background-color: #f7f4f5;
  font-size: 12px;
  .user {
    height: 170px;
    background-color: #c2002e;
    padding: 25px;

    .userinfo {
      display: flex;
      justify-content: space-between;
      color: #fff;
      margin-bottom: 20px;

      .left {
        .username {
          font-size: 21px;
          margin-bottom: 15px;
        }
        .shuoming {
          font-size: 12px;
          opacity: 0.7;
        }
      }
      .rigtht {
        img {
          width: 50px;
          height: 50px;
          opacity: 1;
          border: 3px solid rgba(255, 255, 255, 0.38);
          border-radius: 50%;
        }
      }
    }
    .userdata {
      display: flex;
      justify-content: space-between;
      text-align: center;
      color: white;
      margin-bottom: 10px;
      .num {
        font-size: 21px;
        margin-bottom: 5px;
      }
      .wenzi {
        opacity: 0.7;
      }
    }
    .userpostion {
      border-radius: 8px;
      overflow: hidden;
      .mymyicon {
        margin-right: 10px;
      }
    }
  }
  .other {
    .face {
      overflow: hidden;
      width: 345px;
      height: 143px;
      opacity: 1;
      background: #ffffff;
      border-radius: 8px;
      margin: 30px auto;

      h3 {
        margin-bottom: 30px;
        margin-top: 10px;
        padding: 0 10px;
      }
      .items {
        display: flex;
        justify-content: space-between;
        text-align: center;
        padding: 0 10px;

        .item {
          p {
            font-size: 12px;
            opacity: 0.4;
            span {
              color: turquoise;
              opacity: 1;
            }
          }
          .num {
            font-size: 21px;
            margin-top: 10px;
            margin-bottom: 5px;
          }
        }
      }
    }
    .list {
      padding-bottom: 20px;
      width: 345px;
      height: 322px;
      margin: auto;
      border-radius: 8px;
      overflow: hidden;
      .mymyicon {
        margin-right: 10px;
      }
    }
  }
}
</style>
